<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>元素的获取和增删改</title>
    <!--<style>-->
        <!--.aColor{-->
            <!--color: blue;-->
        <!--}-->
    <!--</style>-->
</head>
<body>
<!--<div id="div1">div1</div>-->
<!--<div id="div2">div2</div>-->
<!--<div class="cls">div3</div>-->
<!--<div class="cls">div4</div>-->
<!--<input type="text" name="username"/>-->
<!--<select id="s">-->
    <!--<option>-&#45;&#45;请选择-&#45;&#45;</option>-->
    <!--<option>北京</option>-->
    <!--<option>上海</option>-->
    <!--<option>广州</option>-->
<!--</select>-->
<!--<a>点我呀</a>-->
<div id="div">java</div>
<input id="input" name="username" value="李瑞">
</body>

<script>
    /**
     * ①根据id获取一个元素
     * ②根据标签名获得多个元素
     * ③根据name属性获得多个元素
     * ④根据class属性获得多个元素
     * 获取当前元素的父元素
     */
   //  let div1=document.getElementById("div1");
   //  alert(div1);
   //  let divs=document.getElementsByTagName("div");
   //  alert(divs.length);
   //  let cls=document.getElementsByClassName("cls");
   //  alert(cls.length);
   //  let username=document.getElementsByName("username");
   //  alert(username.length);
   // let body= div1.parentElement;
   //  alert(body);

    /**
     * 元素的增删改查操作
     * ①创建一个新元素
     * ②将指定元素添加到父元素中
     * ③用父元素删除指定子元素
     * ④用新元素替换子元素
     */
    // let option=document.createElement("option");
    // option.innerText="深圳";
    //
    // let select=document.getElementById("s");
    // select.appendChild(option);
    //
    // select.removeChild(option);
    //
    // let option2=document.createElement("option");
    // option2.innerText="深圳";
    // select.replaceChild(option2,option);

    /**
     * attribute属性的操作
     * ①设置属性
     * ②根据属性名称获取属性值
     * ③根据属性名移除指定的属性
     * ④为元素添加样式
     */
    // let a=document.getElementsByTagName("a")[0];
    // a.setAttribute("href","https://www.baidu.com");
    // let value = a.getAttribute("href");
    // alert(value);
    //
    // a.removeAttribute("href");
    // a.style.color="red";
    // a.className = "aColor";

    /**
     * text文本的操作
     * ①添加文本内容不解析标签
     * ②添加文本内容,解析标签
     */
 // let div=   document.getElementsByTagName("div")[0]
 //    div.innerText="我是div";
 //    div.innerHTML="<b>我是div</b>"
 //
 //    let text = div.innerText;
 //    alert(text);

    let input= document.getElementById("input");
    // let s = input.value;
    let s1 = input.value;
    alert(s1);

</script>
</html>